<template>
  <div>
    <slot name="left"></slot>
    <template v-if="$attrs.value!== undefined">
      <vxe-button
          v-for="obj in $attrs.value"
          :key="obj.code"
          :status="obj['status']"
          :disabled="obj['disabled']"
          v-show="obj['show']"
          :circle="obj.alignMode === 'right' &&!obj['status']"
          :loading="loading[obj.code]"
          @click="handleToolbarBtnClick(obj.code)"
      >
        <span v-if="obj.alignMode === 'right' &&!obj['status']" :title="obj.name">
          <i :class="obj['icon']"></i>
        </span>
        <span v-else-if="obj.code === 'sortable'">
          <i style="color:#1677FF" :class=" obj.values? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked'"></i>{{
            obj['name']
          }}
        </span>
        <span v-else>
          <i :class="obj['icon']"></i>{{ obj['name'] }}
        </span>
      </vxe-button>
    </template>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  name: 'olTableToolBtn',
  data() {
    return {
      loading: this.$attrs.loading
    };
  },
  methods: {
    handleToolbarBtnClick(code) {
      this.$emit('toolbarBtnClick', code);
    }
  }
};
</script>

<style lang="less" scoped>
.table-right-operation-but {
  margin: 0;
}
</style>
